<template>
  <el-dialog v-model="visible" @closed="onReset" append-to-body :title="dialogDatas.title">
    <el-form :model="form" inline ref="formRef1 " class="px10">
      <el-col v-for="item in dialogDatas.datas" :key="item.label">
        <el-form-item :label="item.label">
          <el-cascader
          v-model="item.value"
          :options="options"
          v-if="item.type === 'cascader'"
          clearable
        />

          <el-input
            v-if="item.type === 'input'"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
          />
          <el-select
            v-if="item.type === 'select'"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
          >
            <el-option
              :label="option.label"
              :value="option.value"
              v-for="(option, i) in item.options"
              :key="i"
            />
          </el-select>
          <el-radio-group v-model="item.value" v-if="item.type === 'radio'">
            <el-radio
              :label="radio.label"
              v-for="(radio, radioIndex) in item.options"
              :key="radioIndex"
              :disabled="isDisabled"
            />
          </el-radio-group>
          <el-input
            v-model="item.value"
            type="textarea"
            v-if="item.type === 'textarea'"
            :disabled="isDisabled"
          />
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="item.value"
            type="dates"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
          />
        </el-form-item>
      </el-col>
    </el-form>

    <template #footer v-if="!isDisabled">
      <span class="dialog-footer flex justify-center my6">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="visible = false">确认</el-button>
      </span>
    </template>
    <template #footer v-if="isDisabled">
      <span class="dialog-footer flex justify-center my6">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import type { IUserItem } from '@/api/user/type';

// defineProps({
//   dialogDatas: {
//     required: true
//   }
// });

const visible = ref(false);
const formRef = ref();
let dialogDatas = ref({});

const init = (data?: IUserItem) => {
  visible.value = true;
  // if (data) dialogDatas.value = Object.assign({}, dialogDatas.value, data);
  if (data) dialogDatas.value = JSON.parse(JSON.stringify(data));

  // dialogDatas = data!;
};
const provincesValueChang = () => {};

const isDisabled = computed(() => (dialogDatas.value.type === 'check' ? true : false));
const onReset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
};

defineExpose({ init });
</script>

<style lang="scss" scoped></style>
